layui.use(["echarts"], function () {
  let echarts = layui.echarts;
  var column4 = echarts.init(document.getElementById("column4"), null, {
    width: 600,
    height: 400,
  });
  option = {
    backgroundColor: "#fff",
    title: {
      text: "描边柱状图",
      top: 10,
      left: 15,
      color: "#35598d",
      fontSize: 16,
      fontWeight: "normal",
    },
    tooltip: {
      trigger: "axis",
      formatter: "{b}：{c}",
    },
    grid: {
      left: "5%",
      right: "6%",
      bottom: "3%",
      top: "20%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: [
        "策略1",
        "策略2",
        "策略3",
        "策略4",
        "策略5",
        "策略6",
        "策略7",
        "策略8",
        "策略9",
      ],
      axisLabel: {
        //坐标轴字体颜色
        color: "#9eaaba",
      },
      axisLine: {
        lineStyle: {
          color: "#e5e5e5",
        },
      },
      axisTick: {
        //y轴刻度线
        show: false,
      },
      splitLine: {
        //网格
        show: false,
      },
    },
    yAxis: {
      type: "value",
      axisLabel: {
        //坐标轴字体颜色
        color: "#9eaaba",
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        //y轴刻度线
        show: false,
      },
      splitLine: {
        //网格
        show: true,
        lineStyle: {
          color: "#dadde4",
          type: "dashed", //坐标网线类型
        },
      },
    },
    series: {
      name: "",
      type: "bar",
      barWidth: "40%", //柱子宽度
      itemStyle: {
        //柱子颜色
        borderWidth: 2,
        borderColor: "rgb(79, 116, 223)",
        color: "rgba(79, 116, 223, .3)",
      },
      data: [320, 332, 301, 334, 390, 330, 320, 230, 156],
    },
  };

  column4.setOption(option);

  window.onresize = function () {
    column4.resize();
  };
});
